<script setup>
import {  watch, computed, ref } from "vue";
import { useRouter } from "vue-router";
const props = defineProps(["content"]);
const audio = ref(null);
const router = useRouter();
const audioPlaying = ref(false);
const style = computed(() => ({
  opacity: props.content.style.opacity + "!important",
  width: props.content.style.with + "px",
  height: props.content.style.height + "px",
  top: props.content.style.top + "px",
  left: props.content.style.left + "px",
}));
watch(
  () => props.content,
  (newValue) => {
    console.log(newValue);
  },
  {
    deep: true,
  }
);
const releaseSelect = () => {
  audio.value.play();
  audioPlaying.value = true;
};
const stopSelect = () => {
  audio.value.pause();
  audioPlaying.value = false;
};
const onSelectMusic = () => {
  router.push({
    path: "/selectMusic",
  });
};
</script>
<template>
  <div class="list">
    <div class="item">
      <div class="item-left">
        <div class="img">
          <van-icon
            v-if="audioPlaying"
            name="pause-circle-o"
            size="20"
            color="white"
            @click="stopSelect"
          />
          <van-icon
            v-else
            @click="releaseSelect"
            name="play-circle-o"
            size="20"
            color="white"
          />

          <img
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            alt=""
            srcset=""
          />
        </div>
        <div class="item-left-detail">
          <div>人生的道场（主歌剪辑版）</div>
          <div>魏佳艺</div>
          <div>00:48</div>
        </div>
      </div>
      <div class="select-box" @click="onSelectMusic">使用</div>
    </div>
    <div class="item">
      <div class="item-left">
        <div class="img">
          <van-icon v-if="false" name="play-circle-o" size="20" color="white" />
          <van-icon name="pause-circle-o" size="20" color="white" />
          <img
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            alt=""
            srcset=""
          />
        </div>
        <div class="item-left-detail">
          <div>人生的道场（主歌剪辑版）</div>
          <div>魏佳艺</div>
          <div>00:48</div>
        </div>
      </div>
      <div class="select-box">使用</div>
    </div>
    <div class="item">
      <div class="item-left">
        <div class="img">
          <van-icon v-if="false" name="play-circle-o" size="20" color="white" />
          <van-icon name="pause-circle-o" size="20" color="white" />
          <img
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            alt=""
            srcset=""
          />
        </div>
        <div class="item-left-detail">
          <div>人生的道场（主歌剪辑版）</div>
          <div>魏佳艺</div>
          <div>00:48</div>
        </div>
      </div>
      <div class="select-box">使用</div>
    </div>
  </div>
  <audio
    ref="audio"
    @ended="audioPlaying = false"
    style="display: none"
    src="http://qianmaleiao.oss-cn-beijing.aliyuncs.com/mp3/1696144813940_"
  />
</template>

<style lang="less" scoped>
.list {
  padding: 0 28px 0 31px;
  display: flex;
  flex-direction: column;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 57px;
    .item-left {
      display: flex;

      .img {
        overflow: hidden;
        margin-right: 20px;
        position: relative;
        .van-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        img {
          width: 98px;
          height: 98px;
          border-radius: 16px;
        }
      }
      .item-left-detail {
        div:nth-child(1) {
          font-size: 24px;
          line-height: 33px;
          margin-bottom: 4px;
        }
        div:nth-child(2) {
          margin-bottom: 5px;
        }
        div:nth-child(2),
        div:nth-child(3) {
          font-size: 20px;
          color: #7a7a7a;
          line-height: 28px;
        }
      }
    }
    .select-box {
      width: 100px;
      height: 60px;
      font-size: 24px;
      font-weight: 400;
      color: #333333;
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
